<template>
    <div class="box">
      <div class="nav">
        <router-link to="/mine">
          <img src="../../assets/lyl/image/tuijian/BMQD-1.png" alt="">
        </router-link>
        <p>我的账户</p>
      </div>

      <img src="/static/lyl/zuanshi.png" alt="">
      <p>{{jin}}</p>
      <p class="mine">我的金额</p>
      <button @click="tagert()">提现</button>

      <div @click="tagert()" v-if="isshows" class="footer">
        <div @click.stop class="neibai">
          <p>请选择提现方式</p>
          <ul>
            <li v-for="(item,index) in data">
              <div class="true" :class="{active:cur==index}" @click="shi(index)">
                <img src="/static/lyl/feblei-20.png" alt="">
              </div>
              <div class="right">
                <span>{{item.wxzf}}</span>
                <p>{{item.tg}}</p>
              </div>
            </li>
          </ul>
          <button @click="tixian()">提现</button>
          <button class="btn" @click="tagert()">取消</button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Wozhhu",
      data(){
        return {
          jin:'￥2000',
          cur:0,
          isshows:false,
          data:[
            {wxzf:'提现到微信',tg:'（提现到微信，手续费率为0.29，额外扣除10%服务费 2-3个工作日到账。）'},
            {wxzf:'提现到支付宝',tg:'（提现到支付宝，手续费率为0.36，额外扣除10%服务费 4-6个工作日到账。）'},
          ]
        }
      },
      methods:{
        tagert(){
          this.isshows = !this.isshows;
        },
        shi(i){
          this.cur = i;
        },
        tixian(){
          var num = this.jin.substr(1,this.jin.length)-0;
          if (num>100){
            alert('提现成功');
            this.isshows = !this.isshows;
            this.jin = '0';
          } else{
            alert('金额小于100不能提现');
            this.isshows = !this.isshows;
          }

        }
      }
    }
</script>

<style scoped>
  .nav{
    width: 100%;
    background: #e53e42;
    padding: 3.5rem 0;
    display: flex;
    justify-content: center;
  }
  .nav a{
    position: absolute;
    left: 2rem;
    color: #fff;
    font-size: 34px;
  }
  .nav p{
    font-size: 34px;
    color:#fff;
  }
  .box{
    text-align: center;
  }
  .box>img{
    width: 21rem;
    margin: 5rem 0;
  }
  .box>p{
    color: #e53e42;
    font-size: 30px;
    line-height: 36px;
  }
  .box .mine{
    color: #000;
    margin: 2rem 0 8rem 0;
  }
  .box button{
    width: 48rem;
    height: 7rem;
    background: #61a7ea;
    font-size: 30px;
    color: #fff;
  }
  .box .footer{
    width: 72rem;
    height: 120rem;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
  }
  .box .footer .neibai{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
  }
  .box .footer .neibai>p{
    font-size: 30px;
    line-height: 36px;
    background: #e53e42;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
  }
  .box .footer .neibai ul{
    background: #fff;
  }
  .box .footer .neibai ul li{
    padding: 3rem 2rem;
    display: flex;
    text-align: left;
  }
  .box .footer .neibai ul li .true{
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: #ccc;
    text-align: center;
    line-height: 3.6rem;
    margin-right: 1rem;
  }
  .box .footer .neibai ul li .active{
    background: #e53e42;
  }
  .box .footer .neibai ul li .right span{
    font-size: 30px;
    line-height: 36px;
  }
  .box .footer .neibai ul li .right p{
    font-size: 24px;
    line-height: 36px;
  }
  .box .footer .neibai .btn{
    background: #fff;
    color: #000;
  }
</style>
